import { useEffect } from 'react';
import styles from './home.module.scss';
import { BallCart } from '../../components/ballCart/ballCart';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { fetchBallsSlice } from '../../store/balls/balls.actions';

export const Home = () => {
	const dispatch = useAppDispatch();
	const { balls } = useAppSelector((state) => state.balls);

	useEffect(() => {
		dispatch(fetchBallsSlice());
	}, [dispatch]);
	return (
		<div className={styles.container}>
			{balls && balls.map((ball) => (
				<BallCart key={ball.id} ball={ball} />
			))}
		</div>
	);
};
